<!--遥测管理  -->
<template>
  <div class="" :style="styleObj">
    <!-- <el-card class="head" style="height: 30px"> -->
    <!-- <div style="display: flex">
        <div style="flex: 1">
          <yg-from
            ref="YcForm"
            :formObj="formObj"
            :formData="formData"
            @selectChange="selectChange"
          >
          </yg-from>
        </div>
        <div class="item_button">
          <div>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-search"
              @click="query"
              >查询</el-button
            >
          </div>
          <div>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-refresh"
              @click="resset"
              >重置</el-button
            >
          </div>
        </div>
      </div> -->
    <!-- </el-card> -->
    <ux-grid
      class="tableListValue"
      :key="random"
      :data="TableList"
      ref="plxTable"
      stripe
      :border="false"
      :max-height="styleObj.tableHeight + 36"
      size="mini"
      :header-cell-style="{ 'text-align': 'center' }"
      style="width: 100%; font-size: 12px"
      v-loading="loadingShow"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :cell-style="handleCellStyle"
      :highlight-current-row="true"
      show-overflow
    >
      <ux-table-column
        v-for="(item, index) in columns"
        :key="index"
        :title="item.label"
        :field="item.prop"
        :align="item.align"
        :width="item.width"
        resizeable
      >
      </ux-table-column>
    </ux-grid>
  </div>
</template>

<script>
import { dataURLtoBlob, getBase64 } from "@/utils/exportExcelBlob/index";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
import { mySession } from "@/utils/localStorage";
import { tableMixins } from "./mixin/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "widgetYc",
  mixins: [tableMixins],
  components: {
    YgTable,
    YgFrom,
  },
  props: {
    value: Object,
    ispreview: Boolean,
    widgetIndex: Number,
    pageId: String,
  },
  data() {
    //这里存放数据
    return {
      loadingShow: false,
      columns: [
        // {
        //   prop: "id",
        //   label: "遥测id",
        //   align: "left",
        //   width: "150",
        // },
        {
          prop: "name",
          label: "遥测名称",
        },
        // {
        //   prop: "desc",
        //   label: "遥测描述",
        // },
        {
          prop: "value",
          label: "当前值",
          width: "70",
        },
        {
          prop: "unit",
          label: "单位",
          width: "60",
        },
        {
          prop: "update_time",
          label: "刷新时间",
          width: "200",
        },
      ],
      TableList: [],
      formObj: [
        {
          select: true,
          label: "网关名称", //字段
          prop: "gw_sn", //字段名
          placeholder: "请输入出厂编号", //提示内容
          width: 12, //参考el-col
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [],
        },
        {
          select: true,
          label: "终端名称", //字段
          prop: "term_key", //字段名
          placeholder: "请输入终端名称", //提示内容
          width: 12, //参考el-col
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [{ label: "全选", value: "all" }],
        },
      ],
      formData: {
        gw_sn: "",
        term_key: "",
      },
      mySpecialId: "",
      optionsData: {},
      optionsSetup: {},
    };
  },
  watch: {
    value: {
      handler(val) {
        console.log(val, "val值变化了");
        this.options = val;
        // this.transStyle = this.objToOne(this.options);
        // this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsSetup = val.setup;
        this.setOptionsData(val);
        // let GW_SN = val.data.dynamicData.chartProperties.dataSetNameId;
        // let TERM_KEY = val.data.dynamicData.chartProperties.dataId;
        // if (
        //   this.formData.gw_sn != GW_SN &&
        //   this.formData.term_key != TERM_KEY
        // ) {

        // }
      },
      deep: true,
    },
  },
  mounted() {
    setMessageCallback(this.onMessage);
    this.options = this.value;
    this.optionsData = this.value.data;
    this.optionsSetup = this.value.setup;
  },
  created() {
    console.log(this.value, "this.value", this.isOptionsData());
    if (!this.isOptionsData()) {
      // let newMsg = {
      //   webMsgType: 1010,
      //   funCode: 0,
      // };
      // // newMsg.data = {
      // //   gw_sn: GW_SN,
      // //   term_key: TERM_KEY,
      // // };
      // newMsg.data = this.formData;
      // // console.log(newMsg, "发布数据");
      // // this.mySpecialId = publishMsg(newMsg);
      // this.loadingShow = true;
      return this.$message.warning("请选择数据！！");
    }
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
  //方法集合
  methods: {
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.title == "当前值") {
        return { color: "#299cfa", fontWeight: "bold" };
      } else {
        return { color: "#00e8ff", fontWeight: "bold" };
      }
    },
    query() {},
    resset() {
      this.$refs.YcForm.resetForm();
    },
    isOptionsData() {
      let isOption = false;
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      console.log(optionsData, "判断optionsdata");
      if (optionsData.dataType == "dynamicData") {
        if (optionsData.dynamicData.hasOwnProperty("chartProperties")) {
          if (
            optionsData.dynamicData.chartProperties.hasOwnProperty("dataId") &&
            optionsData.dynamicData.chartProperties.hasOwnProperty(
              "dataSetNameId"
            )
          ) {
            isOption = true;
          }
        } else {
          isOption = false;
        }
      }
      return isOption;
    },
    setOptionsData(val) {
      console.log(val, "---------val---------");
      // const optionsData = this.optionsData; // 数据类型 静态 or 动态
      const optionsData = val.data; // 数据类型 静态 or 动态
      // if (optionsData.dataType == "dynamicData") {
      //   if (optionsData.dynamicData.hasOwnProperty("chartProperties")) {
      //     if (
      //       optionsData.dynamicData.chartProperties.hasOwnProperty("dataId") &&
      //       optionsData.dynamicData.chartProperties.hasOwnProperty(
      //         "dataSetNameId"
      //       )
      //     )
      //     {

      //     }
      //   }
      // } else {
      //   this.optionsData = optionsData.staticData;
      // }
      if (this.isOptionsData()) {
        // this.dataId = optionsData.dynamicData.chartProperties.dataId;
        let GW_SN = optionsData.dynamicData.chartProperties.dataSetNameId;
        let TERM_KEY = optionsData.dynamicData.chartProperties.dataId;
        console.log(GW_SN, TERM_KEY, "------", this.formData);
        if (
          this.formData.gw_sn != GW_SN &&
          this.formData.term_key != TERM_KEY
        ) {
          this.formData.gw_sn =
            optionsData.dynamicData.chartProperties.dataSetNameId;
          this.formData.term_key =
            optionsData.dynamicData.chartProperties.dataId;
          let newMsg = {
            webMsgType: 1010,
            funCode: 0,
          };
          // newMsg.data = {
          //   gw_sn: GW_SN,
          //   term_key: TERM_KEY,
          // };
          newMsg.data = this.formData;
          console.log(newMsg, "发布数据");
          this.mySpecialId = publishMsg(newMsg);
          this.loadingShow = true;
        }
      }
    },
    onMessage(topic, msg) {
      //console.log("正在监听--遥测页面数据", topic, msg);
      // if (msg.webMsgType === 1007) {
      //   switch (msg.funCode) {
      //     case 0:
      //       if (msg.retCode != 0 || !msg.data) {
      //         return this.$message.error(msg.retMsg);
      //       }
      //       let result = msg.data;
      //       let newArr = this.formObj.filter((v) => {
      //         return v.prop === "gw_sn";
      //       });

      //       newArr[0].options = [];
      //       result.map((e) => {
      //         return newArr[0].options.push({
      //           label: e.gw_name,
      //           value: e.gw_sn,
      //         });
      //       });
      //       const allSelect = { label: "全选", value: "all" };
      //       newArr[0].options.unshift(allSelect);
      //       break;
      //     default:
      //       break;
      //   }
      // }
      // if (msg.webMsgType === 1008) {
      //   switch (msg.funCode) {
      //     case 0:
      //       if (this.mySpecialId == msg["specialId"]) {
      //         if (msg.retCode != 0 || !msg.data) {
      //           return this.$message.error(msg.retMsg);
      //         }
      //         let result = msg.data;
      //         let newArr = this.formObj.filter((v) => {
      //           return v.prop === "term_key";
      //         });
      //         newArr[0].options = [];
      //         result.map((e) => {
      //           return newArr[0].options.push({ label: e.name, value: e.id });
      //         });
      //       }
      //       break;

      //     default:
      //       break;
      //   }
      // }
      if (msg.webMsgType === 1010) {
        switch (msg.funCode) {
          case 0:
            if (this.mySpecialId == msg["specialId"]) {
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              console.log("收到了", msg);
              this.TableList = msg.data;
              this.loadingShow = false;
            }
            break;
          case 1:
            if (msg.retCode != 0) {
              return this.$message.error(msg.retMsg);
            }
            break;
          case 2:
            if (this.mySpecialId == msg["specialId"]) {
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              for (let i = 0; i < this.TableList.length; i++) {
                for (let j = 0; j < msg.data.length; j++) {
                  if (this.TableList[i].id === msg.data[j].id) {
                    // this.TableList[i] = {...msg.data[j]}
                    this.TableList[i].id = msg.data[j].id;
                    this.TableList[i].value = msg.data[j].value;
                    this.TableList[i].update_time = msg.data[j].update_time;
                  }
                }
              }
            }
            break;
          default:
            break;
        }
      }
    },
    // selectChange(value, index, prop) {
    //   //console.log(value, index, prop);
    //   if (prop == "gw_sn") {
    //     let newArr = this.formObj.filter((v) => {
    //       return v.prop === "term_key";
    //     });
    //     newArr[0].options = [];
    //     let newMsg = {
    //       webMsgType: 1008,
    //       funCode: 0,
    //     };
    //     newMsg.data = { gw_sn: value };
    //     this.mySpecialId = publishMsg(newMsg);
    //   }
    // },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
};
</script>
<style lang="scss" scoped>
@import "./css/index.scss";
</style>
